<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="main" style="height: 500px; width: 500px;;border: grey 2px;"></div>
    <script type="text/javascript">
        var mycharts = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: "标签人数分布",
                x: 'left',
                itemGap: 8,
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bolder'
                },
                subtext: "190,633人 基准时间：2020-09-15 00:00:00，计算完成于2020-09-15 01:29:20",
                subtextStyle: {
                    fontSize: 12,
                    fontWeight: 'normal'
                }
            },
            dataset: {
                source: [
                    ['流失用户', 183472, 96.24],
                    ['回流用户', 6546, 3.43],
                    ['连续活跃用户', 524, 0.27],
                    ['新用户', 91, 0.05],
                    ['活跃用户', 0, 0.00]
                ]
            },
            legend:{
                orient:'vertical',
                left:'75%',
                y:'90',

            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            series: [
                { type: "pie",
                  radius: '40%',
                  center: ['47%', '40%'],
                  minAngle:3,
                  avoidLabelOverlap: true,
                  label: {
                        show: true,
                        position: 'right',
                        formatter: '{b}: {d}%',
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                  itemStyle: {
                    normal: {
                        
                        shadowBlur: 15,
                        shadowColor: 'rgba(0,0,0,0.5)' // 设置阴影
                    }
                },
                  encode: { itemName: 0, value: 1 } }
            ]
        };
        mycharts.setOption(option)
    </script>
</body>

</html>